<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>修改部门</title>
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>

</head>
<body>
<div id="app">
    <!--搜索框-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!--员工姓名框-->
        <el-form-item label="部门名称">
            <el-input v-model="formInline.name" placeholder="员工姓名"></el-input>
        </el-form-item>
        <!--时间选择框-->
        <el-form-item label="创建时间">
            <el-date-picker
                    v-model="formInline.createTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="100">
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态">

            <template slot-scope="scope">
                <p v-if="scope.row.status=='1' " style="color: red">
                    异常
                </p >
                <p v-else-if="scope.row.status=='0'" style="color: lightgreen">
                    正常
                </p >
            </template>

        </el-table-column>
        <el-table-column
                prop="name"
                label="名称">
        </el-table-column>
        <el-table-column
                prop="createTime"
                label="创建时间">
        </el-table-column>
        <el-table-column
                prop="updateTime"
                label="修改时间">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="primary" @click="editDept(scope.row)">修改状态</el-button>
                <el-button @click="del(scope.row)" type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

</div>
</body>
<script>
    var app= new Vue({
        el:"#app",
        data:{
            tableData:{},
            currentPage:1,
            total:0,
            pageSize:5,
            formInline:{},
        },
        created(){
            this.initTable();
        },
        methods:{
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },
            onSubmit(){
                this.initTable();
            },
            del(row) {
                axios.post("/dept/deleteByPrimaryKey",row).then(resp=>{
                    if (resp.data.code===200){
                        this.$message.success("删除成功");
                        this.initTable();
                    }
                })
            },
            initTable(){
                axios.post("/dept/selectAllDept?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.formInline).then(resp=>{
                    if(resp.data.code===200){
                        this.tableData=resp.data.data.list;
                        this.total=resp.data.data.total;
                    }

                });
            },
            editDept(row){
                axios.post("/dept/updateStatus",row).then(resp=>{
                    this.$message.success("修改成功")
                    this.initTable();
                })
            }
        }
    })
</script>
</html>